<template>
  <div class="radioPlayer">
    <div class="main" v-if="Object.keys(program).length != 0">
      <div class="left">
        <div class="name one_txt_cut">
          {{ program.name }}
        </div>
        <div class="author">
          {{ program.dj.nickname }}
        </div>
        <div class="radioProgress">
          <span>{{ realDt }}</span>
          <el-slider
            v-model="radioProgress"
            :show-tooltip="false"
            @change="radioProgressChange"
          ></el-slider>
          <span>{{ dt }}</span>
        </div>
        <div class="other">
          <!-- 播放和暂停 -->
          <div class="playState">
            <i
              v-if="play"
              class="el-icon-video-pause"
              @click="playState(true)"
            ></i>
            <i v-else class="el-icon-video-play" @click="playState(false)"></i>
          </div>
          <!-- 声音 -->
          <!-- 音量滑块 -->
          <i class="iconfont icon-shengyin"></i>
          <div class="voice">
            <el-slider
              v-model="voiceProgress"
              :show-tooltip="false"
              @input="voiceProgressInput"
              @change="voiceProgressChange"
            ></el-slider>
          </div>
        </div>
      </div>
      <audio
        :src="audioUrl"
        autoplay
        ref="audioRef"
        @timeupdate="audioAudioUpdate"
        @ended="audioAudioEnd"
      ></audio>
      <div class="right">
        <GlobalImageDeep :url="bg" :imgWidth="252" :imgHeight="252" />
      </div>
    </div>
    <!-- 大背景的遮罩层 -->
    <div class="player_bg_mask"></div>
    <div
      class="bg_mask"
      :style="{
        backgroundImage: 'url(' + bg + ')',
      }"
    ></div>
  </div>
</template>

<script>
import moment from "moment";
import { getProgramDetail, getProgramUrl } from "../../api/radioApi";
export default {
  name: "radioPlayer",
  components: {},
  data() {
    return {
      bg: "",
      audioUrl: "",
      program: {},
      radioProgress: 0,
      realDt: "00:00",
      dt: "00:00",
      play: true,
      voiceProgress: 100,
    };
  },
  created() {
    // console.log(this.$route.query);
    this.getProgramDetail();
    this.getProgramUrl();
  },
  mounted() {
    this.$refs.audioRef?.play();
  },
  methods: {
    async getProgramDetail() {
      try {
        let result = await getProgramDetail(this.$route.params.id);
        if (result.code === 200) {
          this.program = result.program;
          this.bg = result.program.coverUrl;
          this.dt = moment(result.program.duration).format("mm:ss");
        }
      } catch (error) {}
    },
    async getProgramUrl() {
      try {
        let result = await getProgramUrl(this.$route.params.mainTrackId);
        if (result.code === 200) {
          this.audioUrl = result.data[0].url;
        }
      } catch (error) {}
    },
    playState(flag) {
      // 正在播放
      if (flag) {
        this.$refs.audioRef.pause();
      } else {
        //  现在是暂停
        this.$refs.audioRef.play().then(
          () => {},
          (err) => {
            console.log(err);
          }
        );
      }
      this.play = !this.play;
    },
    audioAudioUpdate(e) {
      const currentTime = e.target.currentTime; // 这里返回的是 秒 当前播放到 什么时间了
      this.realDt = moment(currentTime * 1000).format("mm:ss"); // 更新实时进度
      this.radioProgress = ((currentTime * 1000) / this.program.duration) * 100;
    },
    audioAudioEnd() {
      this.play = false;
    },
    radioProgressChange(number) {
      this.realDt = moment((number / 100) * this.program.duration).format(
        "mm:ss"
      );
      this.$refs.audioRef.currentTime =
        ((number / 100) * this.program.duration) / 1000;
      this.radioProgress = number;
      this.$refs.audioRef.play().then(
        () => {},
        (err) => {
          console.log(err);
        }
      );
    },
    // 鼠标拖动的时候
    voiceProgressInput(value) {
      this.voiceProgress = value;
      this.$refs.audioRef.volume = value / 100;
    },
    voiceProgressChange(value) {
      this.voiceProgress = value;
      this.$refs.audioRef.volume = value / 100;
    },
  },
  computed: {},
  watch: {
    "$route.params.mainTrackId": {
      handler(newValue) {
        this.getProgramDetail();
        this.getProgramUrl();
        this.radioProgress = 0;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.radioPlayer {
  // 覆盖 slider 组件
  /deep/ .el-slider__bar {
    background-color: @globalColor;
  }
  /deep/ .el-slider__button {
    border: 2px solid @globalColor;
  }

  position: relative;
  width: 100vw;
  height: 100vh;
  // background-color: red;

  .main {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 4;
    width: 654px;
    height: 252px;
    // background-color: green;
    .left {
      flex: 1;
      padding: 20px;
      background-color: #fff;
      .name {
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
      }
      .author {
        font-size: 14px;
      }
      .radioProgress {
        display: flex;
        align-items: center;
        margin-top: 90px;
        span {
          display: inline-block;
          width: 60px;
          text-align: center;
        }
        /deep/ .el-slider {
          flex: 1;
        }
      }
      .other {
        display: flex;
        align-items: center;
        .playState {
          font-size: 28px;
          margin-right: 20px;
          i {
            cursor: pointer;
            &:hover {
              color: @globalColor;
            }
          }
        }
        .voice {
          margin-left: 14px;
          width: 70px;
        }
      }
    }
    .right {
      width: 252px;
      height: 252px;
    }
  }
  .bg_mask {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(60px);
    opacity: 0.6;
    transform: translateZ(0);
  }
  .player_bg_mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3;
  }
}
</style>
